<template>
  <div class="brock">
    <section>
      <el-button type="primary" class="el-icon-plus" @click="addbotfun()">
        增加</el-button
      >
      <el-button type="danger" class="el-icon-delete" @click="delsfun()"
        >批量删除</el-button
      >
    </section>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="redirectName">
          <el-input v-model="ruleForm.redirectName"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接" prop="carousel">
          <el-input v-model="ruleForm.carousel"></el-input>
        </el-form-item>
        <el-form-item label="商品编号" prop="region">
          <el-input v-model="ruleForm.region"></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      height="750"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="200px"> </el-table-column>
      <el-table-column prop="configName" label="商品名称" width="120px">
      </el-table-column>
      <el-table-column prop="redirectUrl" label="跳转链接" width="120">
      </el-table-column>
      <el-table-column prop="configRank" label="排序值" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="goodsId" label="商品编号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-popover placement="top" width="160">
            <p>这一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" @click="cancol()">取消</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                >确定</el-button
              >
            </div>

            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <div class="jz">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "增加",
      tableData: [],
      multipleSelection: [],
      totalCount: 0,
      pagesize: 10,

      dialogFormVisible: false,
      ruleForm: {
        name: "",
        region: "",
        redirectName: "",
        carousel: "",
      },
      rules: {
        redirectName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        region: [{ required: true, message: "编号不能为空", trigger: "blur" }],
        name: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },

      imgurl: "",
      limt: 1,
      imgblo: true,
      configId: "",
    };
  },

  mounted() {
    //刚进入页面
    this.getfun(1);
  },
  methods: {
    cancol() {
      document.body.click();
    },
    // chingimgfun() {
    //   this.$refs["upload"].$refs["upload-inner"].handleClick(); //单机图片可以切换 上传
    //   this.imgblo = false;
    // },
    addbotfun() {
      this.title = "增加";
      this.dialogFormVisible = true;
      this.ruleForm.name = "";
      this.ruleForm.region = "";
      this.ruleForm.redirectName = "";
      this.ruleForm.carousel = "";
    },
    // closeFun() {
    //   //关闭弹框事件
    //   this.$refs.upload.clearFiles(); //弹窗关闭了 清空图片
    //   this.ruleForm.name = "";
    //   this.ruleForm.region = "";
    // },
    async delsfun() {
      //批量删除
      if (this.multipleSelection.length > 0) {
        let array = [];
        this.multipleSelection.map((itme) => {
          array.push(itme.categoryId);
        });
        let result = await this.$http.delete("/indexConfigs", {
          data: {
            ids: array,
          },
        });
        this.getfun(1);
      } else {
        console.log("里面没东西");
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
         this.getfun(val)
    },
    resetForm(formName) {
      //重置按钮
      (this.ruleForm.name = ""), (this.ruleForm.region = "");
    },
    submitForm(formName) {
      //创建按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "增加") {
            this.addloop();
            console.log("增加");
          } else {
            this.editofun();
            console.log("修改按钮");
          }
        } else {
          console.log("修改");
          return false;
        }
      });
    },
    async addloop() {//增加
      let result = await this.$http.post("/indexConfigs", {
       
          configName: this.ruleForm.redirectName,
          configRank: this.ruleForm.name,
          configType:5,
          goodsId: this.ruleForm.region,
          redirectUrl:this.ruleForm.carousel
         
        
          
  
          // goodsId: this.ruleForm.region,
          // configName: this.ruleForm.redirectName,
          // configRank: this.ruleForm.name,
      });
      console.log(this.ruleForm.name);

      this.dialogFormVisible = false;
      this.getfun(1);
    },

    async getfun(age) {
      //获取分页

      let result = await this.$http.get("/indexConfigs", {
        params: {
          pageNumber: age,
          pageSize: 10,
          configType: 5,
        },
      });
      console.log(result);
      // this.totalCount = result.data.totalCount;
      this.tableData = result.data.list;
      console.log(this.tableData);
      // this.carouselUrl = result.data.list.carouselUrl;
    },
    handleEdit(index, row) {
      //修改商品的回显
      console.log(row);
      (this.title = "修改"), (this.dialogFormVisible = true);
      this.ruleForm.carousel = row.redirectUrl;
      this.ruleForm.name = row.configRank;
      this.ruleForm.region = row.goodsId;
      this.ruleForm.redirectName = row.configName;
      this.configId = row.configId;
    },
    async handleDelete(index, row) {
      //热销商品的删除

      let arry = [row.configId];
      let result = await this.$http.delete("/indexConfigs", {
        data: {
          ids: arry,
        },
      });

      this.cancol();
      this.getfun(1);
    },
    async editofun() {
      //修改商品
      let result = await this.$http.put("/indexConfigs", {
        configId: this.configId,
        configName: this.ruleForm.redirectName,
        configRank: this.ruleForm.name,
        configType: 5,
        goodsId: this.ruleForm.region,
      });
      this.dialogFormVisible = false;
      this.getfun(1);
    },
  },
};
</script>

<style lang="less" scoped>
.jz{
  text-align: center;
}
</style>
